import { memo, useEffect, useRef, useContext, useState } from 'react';
import { Button, Select, Skeleton, Modal } from 'antd';
import { CodepenCircleOutlined, CheckOutlined, CheckCircleFilled } from '@ant-design/icons';
import { getAPPList } from '@/services/appService';
import IndexStyle from '@/layouts/index.less';
import APPDetail from './APPDetail';
import DemandModal from './DemandModal';
import { GlobalContext } from '@/layouts/context';


const { Option } = Select;
const APPManager = ({ width })=>{
    useContext(GlobalContext);
    const [list, setList] = useState([]);
    const [showList, setShowList] = useState([]);
    const [appType, setAppType] = useState(null);
    const [detailInfo, setDetailInfo] = useState(null);
    const [mode, setMode] = useState('charge');
    const [visible, setVisible] = useState(false);
    const [confirmVisible, setConfirmVisible] = useState(false);
    useEffect(()=>{
        getAPPList()
        .then(data=>{
            setList(data);
        })
    },[])
    useEffect(()=>{
        let newArr = [...list];
        setShowList(newArr);
    },[list, appType, mode]);
    console.log('appManager render()...');
    return (
        detailInfo 
        ?
        <APPDetail data={detailInfo} onClose={()=>setDetailInfo(null)} />
        :
        <>
            <DemandModal visible={visible} onOpenConfirmModal={()=>setConfirmVisible(true)} onClose={()=>setVisible(false)} />
            { confirmVisible && <Modal 
                open={confirmVisible}
                width={420}
                footer={null}
                title={
                    <div style={{ textAlign:'center', borderBottom:'1px solid #d9d9d9', paddingBottom:'1rem', marginBottom:'1rem' }}>
                        <div style={{ margin:'2rem 0'}}><CheckCircleFilled style={{ fontSize:'54px', color:'#38c793' }} /></div>
                        <div style={{ fontSize:'1.6rem' }}>定制需求提交成功</div>
                        <div style={{ fontSize:'1rem', color:'rgba(0, 0, 0, 0.65)' }}>产品技术人员会在24小时内联系您</div>
                    </div>
                }
            ><Button type='primary' size='large' style={{ width:'100%' }} onClick={()=>setConfirmVisible(false)}>确认</Button></Modal>}
            <div style={{ height:'46px', display:'flex', justifyContent:'space-between' }}>
                <div>
                    <Select style={{ width:'120px', marginRight:'1rem' }} placeholder='类型' value={appType} onChange={value=>setAppType(value)} >
                        <Option value='scene'>场景应用</Option>
                        <Option value='module'>模块应用</Option>
                    </Select>
                    <Select style={{ width:'120px' }} value={mode} onChange={(value)=>setMode(value)}>
                        <Option value='charge'>收费</Option>
                        <Option value='free'>免费</Option>
                    </Select>
                </div>
                <Button type='primary' ghost icon={<CodepenCircleOutlined />} onClick={()=>setVisible(true)}>定制需求提交</Button>
            </div>
            <div style={{ height:'calc( 100% - 46px)' }} className={IndexStyle['flex-container'] + ' ' + IndexStyle['custom-scroll']}  >
                {
                    showList.length 
                    ?
                    showList.map((item, index)=>(
                        <div key={item.key} className={IndexStyle['flex-item-wrapper']} style={{ width: width < 1440 ? '33.3%' : '25%' }}>
                            <div className={IndexStyle['flex-item']}>
                                <div className={IndexStyle['flex-item-header']}>
                                    <div className={IndexStyle['flex-item-header-icon']} style={{ backgroundImage:`url(${item.icon})`}}></div>
                                    <div className={IndexStyle['flex-item-header-title']}>
                                        <div className={IndexStyle['title']}>{ item.appName }</div>
                                        <div><span className={IndexStyle['tag'] + ' ' + ( item.type === '模块应用' ? IndexStyle['module'] : IndexStyle['scene']) }>{ item.type }</span></div>
                                    </div>
                                </div>
                                <div className={IndexStyle['flex-item-content']}>{ item.desc || '--' }</div>
                                <div className={IndexStyle['flex-item-footer']}>
                                    {
                                        item.status 
                                        ?
                                        <Button icon={<CheckOutlined style={{ color:'#b7b7b7' }} />} style={{ background:'#eee', color:'#b7b7b7' }}>已配置</Button>
                                        :
                                        <Button style={{ background:'#fff', border:'1px solid #0780ed', color:'#0780ed' }} onClick={()=>setDetailInfo(item)}>申请体验</Button>
                                    }
                                </div>
                            </div>
                        </div>
                    ))
                    :
                    <Skeleton active />
                }
            </div>
        </>
    )
}

export default memo(APPManager);